import IntegrationTable, {
	IntegrationTableProps,
	OperatingItem,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { Image, Cascader, Radio, Rate } from "antd";
import Search from "antd/lib/input/Search";
import { user, classify, remove, getRewardList } from "./service";
import { arrayToObject, getArray } from "phinney-toolkit";
import { DynamicFormItem } from "@/components/DynamicForm";
import axios from "axios";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;

	const [rewardList, setRewardList] = useState<any>([]);
	const getRewardItemList = async () => {
		const res = await getRewardList({
			pageIndex: 1,
			pageSize: 100,
			rewardType: 40,
		});
		!isUnMounted &&
			setRewardList(
				getArray(res?.data).map((item: any) => ({
					label: item?.rewardName,
					value: item?.rewardCode,
				}))
			);
	};

	// 表格项
	const columns: ProColumns[] = [
		{
			title: "id",
			dataIndex: "id",
		},
		{
			title: "任务code",
			dataIndex: "taskCode",
		},
		{
			title: "奖品名称",
			dataIndex: "rewardName",
			search: false,
		},
		{
			title: "奖品标题",
			dataIndex: "title",
			search: false,
		},
		{
			title: "奖品数量",
			dataIndex: "rewardPropsNum",
			search: false,
		},
		{
			title: "完成任务数量",
			dataIndex: "taskNum",
			search: false,
		},
		{
			title: "创建时间",
			dataIndex: "createTime",
			search: false,
		},
		{
			title: "奖品图片",
			dataIndex: "rewardIcon",
			search: false,
			render: (_, record: any) => {
				if (record.rewardIcon) {
					return (
						<Image
							src={record.rewardIcon}
							width={50}
							style={{ padding: 8 }}
							alt=""
						/>
					);
				} else {
					return <div>-</div>;
				}
			},
		},
	];

	// 表单项
	const getFormItems = (vm: any, isEdit?: boolean): DynamicFormItem[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "text",
				label: "任务code",
				name: "taskCode",
				required: true,
			},
			{
				type: "text",
				label: "奖品名称",
				name: "rewardName",
				required: true,
			},
			{
				type: "upload",
				label: "奖品图片",
				name: "rewardIcon",
				fieldProps: {
					limit: 1,
				},
				required: true,
			},
			{
				type: "text",
				label: "奖品标题",
				name: "title",
				required: true,
			},
			{
				type: "select",
				label: "任务奖励道具",
				name: "rewardPropsCode",
				required: false,
				options: rewardList,
			},
			{
				type: "text",
				label: "奖品数量",
				name: "rewardPropsNum",
				required: false,
			},
			{
				type: "text",
				label: "完成任务数量",
				name: "taskNum",
				required: true,
			},
			{
				type: "text",
				label: "任务奖励环保币",
				name: "rewardCoinNum",
				required: true,
			},
			{
				type: "text",
				label: "任务奖励能量",
				name: "rewardEnergyNum",
				required: true,
			},
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "id",
		scroll: { x: 1000 },
		columns,
		listProps: {
			url: "/game/group/task/list",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
		addProps: {
			url: "/game/group/task/add",
			modalProps: {
				formProps: {
					labelCol: { span: 8 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm);
				},
			},
			paramsHandle: ({ ...params }): any => {
				params.rewardIcon = (
					params?.rewardIcon?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
				};
			},
		},
		updateProps: {
			url: "/game/group/task/edit",
			method: "POST",
			modalProps: {
				formProps: {
					labelCol: { span: 7 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm, true);
				},
				formValuesHandle: async (record: any) => {
					return {
						...record,
						rewardIcon: record.rewardIcon
							? [
									{
										uid: "-1",
										status: "done",
										name: record.rewardIcon,
										url: record.rewardIcon,
									},
							  ]
							: [],
					};
				},
			},
			paramsHandle: ({ ...params }): any => {
				params.rewardIcon = (
					params?.rewardIcon?.map((item: any) => item.url) || []
				).join(",");
				return {
					...params,
				};
			},
		},
		deleteProps: {
			url: "/game/group/task/delete",
			method: "POST",
		},
	};

	// 初始化加载数据
	useEffect(() => {
		getRewardItemList();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
